<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/validationEngine.jquery.css" type="text/css"/>
<script src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="iso-8859-1"></script>
<script src="/js/jquery.validationEngine.js" type="text/javascript" charset="iso-8859-1"></script>

<script type="text/javascript">
      function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    document.getElementById('imagem_up').src = e.target.result;
                }
               // alert(input.files[0]);
                reader.readAsDataURL(input.files[0]);
            }
        }

    
</script>
<style type="text/css">

    #habilAlter
    {
        cursor: pointer;

   }

   #habilAlter:hover
   {
       font-weight: bold;
}


    #imagem_up
    {

	padding: 5px;
	height: expression(this.scrollHeight >= "125" ? "25" : "auto");
	width: expression(this.scrollWidth >= "210" ? "210" : "auto");

    }
    label {
    display: block;
    float: left;
    font-weight: bold;
    margin-right:5px;
    text-align: right;
    width: 80px;
    line-height: 25px;
    font-size: 15px;
    
    }

    .input{
    font-family: Arial, Verdana;
    font-size: 15px;
    padding: 5px;
    border: 1px solid #b9bdc1;
    width: 300px;
    color: #797979;
    }

    .hint{
    display:none;
    }

    .field{
        padding-bottom: 3px;
    }

    .field:hover .hint {
    position: absolute;
    display: block;
    margin: -30px 0 0 455px;
    color: #FFFFFF;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.6);

    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    }
</style>
<div style="height: 600px; width: 500px;">
	<div style="">
                	<h4>Insira os dados do<span> produto:</span></h4>
    </div>
	 <form method="post" id="form" name="form" accept="jpeg|jpg|png|gif" enctype="multipart/form-data" action="">
     
               	<div class="p4">
                    
                    <div class="field">
                        <?php if (!is_null($this->msg)) echo $this->msg     ;?>
                    </div>

                            <div class="field">
                            <label for="name">Imagem:</label>
                            <img style="width: 210px; height: 125px;" id="imagem_up" src="/images/up/<?php echo $this->produto['caminho_imagem'];?>" alt=""/>
                            <br/>
                           <input id="imagem" name="img" type="file" id="img" onchange="readURL(this);" class="input validate[required]" <?php if (isset ($this->produto)){?> disabled = "true" <?php }?>/>
                            <br/>
                            <?php if (isset ($this->produto)) {?><a id="habilAlter" onclick="habilitarAlter()">Clique para Habilitar a Alteraração de Imagem</a><?php }?>
                            </div>
                              <div class="field">
                                <label for="name">Nome:</label>
                                <input type="text" class="input  validate[required,maxSize[50]]  text-input" name="nome" id="nome"  value= "<?php echo $this->produto['nome'];?>" />
                                <p class="hint">Insira um nome.</p>
                              </div>


                              <div class="field">
                                    <label for="message">Descrição:</label>
                                        <textarea cols="45" rows="5" class="input  validate[required]" name="descricao" id="descricao"><?php echo $this->produto['descricao'];?></textarea>
                                    <p class="hint">Insira uma descrição.</p>
                               </div>

                               <div class="field">
                                    <label class="color-2" for="email">Preço: R$</label>
                                    <input type="text" class="input  validate[required]" name="preco" id="preco" value= "<?php echo $this->produto['preco'];?>"/>
                                    <p class="hint">Insira um preco.</p>
                               </div>

                           <div class="field">
                                    <label class="color-2" for="email">Tipo</label>
                                    <select name="id_tipo_produto" class="validate[required] text-input"">
                                    <?php foreach ($this->lista_tipos as $tipo) : ?>
                                         <?php $selected = ($this->produto['id_tipo_produto'] == $tipo['id'])? "selected" : "";?>
                                      
                                            <option  <?php echo $selected?> value="<?php echo $this->escape($tipo['id'])?>"><?php echo $this->escape($tipo['descricao'])?></option>

                                    <?php endforeach;?>
                                    </select>
                                    <p class="hint">Selecione um tipo.</p>
                            </div>

                            <div class="field">
                                    <label class="color-2" for="email">É pagina principal</label>

                                    <?php $selected = ($this->produto['eh_pagina_principal'] == '1')? "checked" : "";?>
                                    <input type="checkbox" name="eh_pagina_principal"  <?php echo $selected; ?>/>

                                    <p class="hint">Selecione um tipo.</p>
                            </div>
                            <br/><br/>
                            <div class="field">
                                <label class="color-2" for="email">&nbsp;</label>
                                <input type="submit" class="button-1" value="<?php if (!isset ($this->produto)){?>Adicionar Produto<?php } else {?>Alterar Produto<?php }?>"/>
                                <?php if (isset ($this->produto)) {?>
                                        <input type="hidden" value="<?php echo $this->escape ($this->produto['id']);?>" name="id">
                                <?php } ?>
                            </div>


                    
                </div>
	</form>
</div>

 <script type="text/javascript">

            $(window).load(function(){
                   $("#form").validationEngine();
            });

            $('#preco').keypress(function(event) {
                    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
                    event.preventDefault();
            }
            });

            function habilitarAlter()
            {
                $("#imagem").removeAttr('disabled');
            }
 </script>